import React, { Component } from 'react'
import { connect } from 'dva';
import { Form, Input } from 'antd';
import { SearchRow, SearchCol, SearchButton } from '@/styled/form';
import { DropDownSelect } from '@/components/DropDownSelect';

import { DICT } from '../enum';

interface Props {
  form: any,
  dispatch?: Function,
  initCurrent?: Function,
  dict?: Object,
  cond?: any,
  dictList?: Object,
  add: Function,
  export: Function,
  type: string,
  isReset?: boolean,
}

const FormItem = Form.Item;


@connect(({ qr_code }) => ({
  dict: qr_code.dict,
  cond: qr_code.cond || {}
}))
class Search extends Component<Props, any> {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'qr_code/queryDict',
      payload: {
        keyList: DICT
      }
    }).then(() => {
      const { cond, form } = this.props;
      // const { pageNum, pageSize, ...searchParams } = cond;
      form.setFieldsValue({
        generationMode: cond.generationMode
      });
    });
  }

  search = e => {
    e.preventDefault();
    const { dispatch, type } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        dispatch({
          type: 'qr_code/updateCond',
          payload: {
            ...values,
            type
          }
        });

        this.props.initCurrent()
      }
    });
  };

  add = e => {
    e.preventDefault();
    this.props.add();
  }

  export = e => {
    e.preventDefault();
    this.props.export();
  }

  render() {
    const { form, dict = {} } = this.props;
    const { getFieldDecorator } = form;
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    return (
      <Form onSubmit={this.search}>
        <SearchRow type="flex" justify="space-between">
          <SearchCol key={0} span={4}>
            <FormItem
              label="二维码名称"
              {...formItemLayout}
            >
              {getFieldDecorator('name', {
                rules: [{ message: '输入名称' }],
              })(
                <Input style={{ width: '100%' }} placeholder="请输入名称" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={1} span={4}>
            <FormItem
              label="安装位置"
              {...formItemLayout}
            >
              {getFieldDecorator('installLocation', {
                rules: [{ message: '输入名称' }],
              })(
                <Input style={{ width: '100%' }} placeholder="请输入安装位置" />
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={2} span={4}>
            <FormItem
              label="生成方式"
              {...formItemLayout}
            >
              {getFieldDecorator('generationMode', {
                rules: [{ message: '输入名称' }],
              })(
                DropDownSelect(dict, 'qrcode.generation.mode', '', '140px')
              )}
            </FormItem>
          </SearchCol>
          <SearchCol key={3} span={6}></SearchCol>
          <SearchCol key={5} span={6}>
            <SearchRow type="flex" justify="end">
              <SearchButton onClick={this.export}>导出</SearchButton>
              <SearchButton htmlType="submit">搜索</SearchButton>
              <SearchButton onClick={this.add} type="primary">新增二维码</SearchButton>
            </SearchRow>
          </SearchCol>
        </SearchRow>
      </Form>
    );
  }
}

const SearchS = Form.create<Props>()(Search);
export default SearchS;
